<template>


  <div style=" margin: 0 auto; margin-top: 20px" >
    <div id="parent" class="ui-widget-content container demo_box" @load="showPlantDesign" dir="auto" style="overflow: scroll; border: 1px solid #000000 ;margin: 0 auto; text-align: center; grid-template-columns: 300px 300px; float: left">
      <!--<div class="ui-widget-header" id="containment-wrapper" style="z-index: -1"> </div>-->
    </div>
    <dialog id="dia" title="进入" style="display: none; width : 30% ;text-align: center;opacity: 0.8; position:fixed;top: 100px;left: 100px;">
      <span>请选择一个操作：</span>

      <p></p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">返 回</el-button>
        <el-button type="primary" @click="getInCommontest">进 入</el-button>
          <p></p>
          <input placeholder="请输入品种名称" id="exId" type="text">
          <el-button @click="changeExId">确认更改</el-button>
      </span>
    </dialog>

  </div>


</template>

<script>

  import { getExperimentField } from '../../api/experimentField'
  import { putSpeciesPositionToBlock } from '../../api/block'
  import { getLocalSpecies} from '../../api/SpeciesManage'
  export default {

    data() {
      return {
        tableList: [],
        listLoading: true,
        isShowEditVisible: false,
        isShowAddVisible: false,
        confirmVisible: false,
        temp: {
          uid: '',
          cname: '',
          date: '',
          status: ''
        },
        total: 0,
        page: 1,
        pageSize: 10,
        status: [
          {
            statusId: 1,
            label: '启用'
          }, {
            statusId: 0,
            label: '禁用'
          }
        ],
        species: '',
        localSpecies: [],
        sName: [],
        value: '',
        searchName: '',
        filterTableDataEnd: [],
        expField:[{area:"A1",species:[ {"loc":"1","id":"51-57"},
            {"loc":"2","id":"1212"},
            {"loc":"3","id":"41-77"},
            {"loc":"4","id":"10-26"},
            {"loc":"5","id":"12-35"},
            {"loc":"6","id":"7-57"},
            {"loc":"7","id":"38-34"},
            {"loc":"8","id":"51-19"}]},
          {area:"A2",species:[ {"loc":"1","id":"1"},
              {"loc":"2","id":"38-34"},
              {"loc":"3","id":"大西洋"},
              {"loc":"4","id":"38-39"},
              {"loc":"5","id":"12-35"},
              {"loc":"6","id":"41-77"},
              {"loc":"7","id":"38-77"},
              {"loc":"8","id":"41-54"}]}
        ]
      }
    },
    mounted() {
      var parent = document.getElementById('parent')
      parent.style.gridTemplateColumns = 300 + 'px' + 300 + 'px'
      this.showPlantDesign(parent)
    },
    created() {
      // 刚打开页面时就去取数据；
      this.fetchData()

    },

    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },

    methods: {
      // 新增farmland更新数据
      fetchData() {
        this.listLoading = true
        var parent = document.getElementById('parent')
        console.log('fetchdataaaaaaaaaaaa')
        getLocalSpecies({}).then(res => {

          this.localSpecies = res.data.rows
          console.log(this.localSpecies)
          for(var i =0; i <this.localSpecies.length; i++){
            var name = this.localSpecies[i].name
            this.sName.push(name)
            console.log(name)
          }
          console.log(this.sName.length)
        })
      },
      showPlantDesign(parent) {
        // parent.setAttribute('style', 'grid-template-columns: 160px 160px 160px')
        console.log(this.GLOBAL.farmland.farmlandId)
        getExperimentField({ 'experimentFieldId': this.GLOBAL.farmland.farmlandId }).then(res => {
          console.log(res.data)
          console.log('showPlantDesignnnnnnnnnnn')
          this.expField = res.data.data
          var dia = document.getElementById('dia')
          var columns = 2
          for (var k = 0; k < columns; k++) {
            var a = document.createElement('div')
            a.classList.add('col2')
            a.setAttribute('id', 'area' + k)
            a.style.width = 290 + 'px'
            a.style.height = 690 + 'px'
            a.style.background = '#fff8c1'
            a.style.textAlign = 'center'
            a.style.float = 'left'

            parent.appendChild(a)
          }

          for (var j = 0; j < columns; j++) {
            console.log('expfield:   ' + this.expField)
            console.log('blockList:   ' + this.expField['blockList'][0]['id'])
            for (var i = 0; i < this.expField['num'] / this.expField['rows']; i++) {

              var x = document.createElement('div')
              var num = this.expField['num'] / this.expField['rows']
              console.log(k + num + i)
              x.classList.add('col1')
              //x.setAttribute('flag', i + ' ' + j)
              x.setAttribute("id", "A" + (j + 1) + (i + 1))
              if (j < 1) {
                x.innerHTML = (this.expField['blockList'][i]['speciesId'])
                x.setAttribute('testId', this.expField['blockList'][i]['id'])
                x.setAttribute('fieldId', this.expField['blockList'][i]['fieldId'])
                x.setAttribute('xx', this.expField['blockList'][i]['x'])
                x.setAttribute('y', this.expField['blockList'][i]['y'])
              } else {
                x.innerHTML = (this.expField['blockList'][i + num]['speciesId'])
                x.setAttribute('testId', this.expField['blockList'][i + num]['id'])
                x.setAttribute('fieldId', this.expField['blockList'][i + num]['fieldId'])
                x.setAttribute('xx', this.expField['blockList'][i + num]['x'])
                x.setAttribute('y', this.expField['blockList'][i + num]['y'])
              }
              x.style.width = 280 + 'px'
              x.style.height = 50 + 'px'
              x.style.background = '#ccc'
              x.style.textAlign = 'center'
              x.style.margin = 3 + 'px'

              //var sId = this.expField[j]['blockList'][i]['speciesId']

              x.onclick = function() {
                console.log("11111111111")
                dia.style.display = 'block'
                dia.setAttribute('sid', this.getAttribute('testId'))
                dia.setAttribute('name', this.innerHTML)
                dia.setAttribute('fid', this.getAttribute('fieldId'))
                dia.setAttribute('xx', this.getAttribute('xx'))
                dia.setAttribute('y', this.getAttribute('y'))
                dia.setAttribute('xy', this.getAttribute('id'))
                this.species = this.innerHTML
                console.log(this.confirmVisible + ' + ' + this.species)
              }
              var field = document.getElementById('area' + j)
              field.appendChild(x)
            }
          }
          var son = document.getElementById('containment-wrapper')
          son.style.width = 1000 + 'px' // 框架宽高
          son.style.height = 1000 + 'px'
        })
      },
      getInCommontest() {
        var dia = document.getElementById('dia')
        this.species = dia.getAttribute('sid')
        var name = dia.getAttribute('name')
        this.GLOBAL.species.testId = this.species
        console.log('AAAAAAA' + this.GLOBAL.species.testId)
        if (name.length > 0) {
          this.$router.push('/commontest')
          dia.style.display = 'none'
        } else {
          alert('该区块不存在试验品种！')
        }

      },
      closeDialog(){
        var dia = document.getElementById('dia')
        dia.style.display = 'none'
      },
      changeExId() {
        var userInput = document.getElementById('exId')
        var exId = userInput.value
        console.log(exId)
        if (this.sName.indexOf(exId) > -1) {
          var dia = document.getElementById('dia')
          this.species = dia.getAttribute('sid')
          this.GLOBAL.species.testId = this.species
          var fieldId = dia.getAttribute('fid')
          var y = dia.getAttribute('y')
          var xx = dia.getAttribute('xx')
          var xy = dia.getAttribute('xy')
          var x = document.getElementById(xy)
          x.innerHTML = exId
          putSpeciesPositionToBlock([{ 'fieldId': fieldId, 'id': this.GLOBAL.species.testId, 'speciesId': exId, 'x': xx, 'y': y }]).then(res => {
            this.closeDialog()
          })
        } else {
          alert('请填写正确的品种名称！')
        }
      }
    }
  }
</script>

